<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            perspective: 8000px;
        }
        html,body,#root{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #root{
            height: 150px;
            width: 150px;
            transform: rotateX(-20deg) rotateY(-45deg) rotateZ(0deg);
            transform-style: preserve-3d;
        }
        .item{
            box-sizing: border-box;
            width:100%;
            height: 100%;
            position: absolute;
           /* border: #333 solid 1px;*/
            background-color: aqua;
        }
        .item_top{
            transform: rotateX(90deg) translateZ(var(--item-translateZ));
        }
        .item_bottom{
            transform: rotateX(90deg) translateZ(var(--item-translateZ1));
        }
        .item_right{
            transform: rotateY(90deg) translateZ(var(--item-translateZ));
        }
        .item_left{
            transform: rotateY(90deg) translateZ(var(--item-translateZ1));
        }
        .item_front{
            transform: translateZ(var(--item-translateZ));
        }
        .item_queen{
            transform: translateZ(var(--item-translateZ1));
        }
        .square{
            --square-width: 48px;
            --item-translateZ: 24px;
            --item-translateZ1: -24px;
            transform-style: preserve-3d;
            float: left;
            position: absolute;
            width: var(--square-width);
            height: var(--square-width);
        }


        .square:nth-child(1),
        .square:nth-child(2),
        .square:nth-child(3),
        .square:nth-child(10),
        .square:nth-child(11),
        .square:nth-child(12),
        .square:nth-child(19),
        .square:nth-child(20),
        .square:nth-child(21){
            top: 0px;
        }
        .square:nth-child(4),
        .square:nth-child(5),
        .square:nth-child(6),
        .square:nth-child(13),
        .square:nth-child(14),
        .square:nth-child(15),
        .square:nth-child(22),
        .square:nth-child(23),
        .square:nth-child(24){
            top: 50px;
        }
        .square:nth-child(7),
        .square:nth-child(8),
        .square:nth-child(9),
        .square:nth-child(16),
        .square:nth-child(17),
        .square:nth-child(18),
        .square:nth-child(25),
        .square:nth-child(26),
        .square:nth-child(27){
            top: 100px;
        }


        .square:nth-child(3n+1){
            left: 0px;
        }

        .square:nth-child(3n+2){
            left: 50px;
        }

        .square:nth-child(3n+0){
            left: 100px;
        }


        .square:nth-child(n+1):nth-child(-n+9){
            transform: translateZ(50px);
        }
        .square:nth-child(n+10):nth-child(-n+18){
            transform: translateZ(0px);
        }
        .square:nth-child(n+19):nth-child(-n+27){
            transform: translateZ(-50px);
        }

        .square:nth-child(18){
            animation: leftFloat18 alternate 1s infinite ease-in-out;
        }
        .square:nth-child(27){
            animation: leftFloat27 alternate 1s infinite ease-in-out;
        }

        .square:nth-child(3){
            animation: leftFloat3 alternate 1s infinite ease-in-out;
        }
        .square:nth-child(12){
            animation: leftFloat12 alternate 1s infinite ease-in-out;
        }
        .square:nth-child(6){
            animation: leftFloat6  alternate 1s infinite ease-in-out;
        }
        .square:nth-child(15){
            animation: leftFloat15 alternate 1s infinite ease-in-out;
        }


        @keyframes leftFloat3 {
            0%   { top: 1px;left: 120px; transform: translateZ(49px);}
            100% { top: 0px;left: 100px; transform: translateZ(50px);}
        }
        @keyframes leftFloat12 {
            0%   { top: 1px;left: 120px; transform: translateZ(1px);}
            100% { top: 0px;left: 100px; transform: translateZ(0px);}
        }
        @keyframes leftFloat6 {
            0%   { top: 49px;left: 120px; transform: translateZ(49px);}
            100% { top: 50px;left: 100px; transform: translateZ(50px);}
        }
        @keyframes leftFloat15 {
            0%   { top: 49px;left: 120px; transform: translateZ(1px);}
            100% { top: 50px;left: 100px; transform: translateZ(0px);}
        }
        @keyframes leftFloat18 {
            0%   { left: 140px; transform: translateZ(-1px);}
            100% { left: 100px; transform: translateZ(0px);}
        }
        @keyframes leftFloat27 {
            0%   { left: 140px; transform: translateZ(-49px);}
            100% { left: 100px; transform: translateZ(-50px);}
        }



        /*配色*/
        .square{
            --color-white: #fff;
            --color-ash: #eeeeee;
        }

        .square_white .item{
            background-color: var(--color-ash);
        }
        .square_white .item_top{
            background-color: var(--color-white);
        }
        .square_ash .item{
            background-color: #d7e3f6;
        }
        .square_ash .item_top{
            background-color: #e0eaf4;
        }

        .square:nth-child(3) .item,
        .square:nth-child(6) .item,
        .square:nth-child(12) .item,
        .square:nth-child(15) .item{
            background-color: #7e75e1;
        }
        .square:nth-child(3) .item_top,
        .square:nth-child(12) .item_top{
            background-color: #b3b4ff;
        }

        .square:nth-child(6) .item_top,
        .square:nth-child(15) .item_top,
        .square:nth-child(15) .item_front,
        .square:nth-child(12) .item_front{
            background-color: #4c3eba;
        }
        .square:nth-child(4) .item{
            background-color: #c3c4c5;
        }
        .square:nth-child(4) .item_top{
            background-color: #82888b;
        }
        .square:nth-child(5) .item{
            background-color: #d6e0eb;
        }
        .square:nth-child(5) .item_top{
            background-color: #d1dbe8;
        }
        .square:nth-child(7) .item{
            background-color: #cebcec;
        }
        .square:nth-child(7) .item_top,
        .square:nth-child(7) .item_right{
            background-color: #a495c6;
        }
        .square:nth-child(8) .item{
            background-color: #aab0b3;
        }
        .square:nth-child(8) .item_top{
            background-color: #808689;
        }
        .square:nth-child(8) .item_right{
            background-color: #808689;
        }
        .square:nth-child(11) .item{
            background-color: #a3b2fe;
        }
        .square:nth-child(11) .item_top{
            background-color: #cbdeff;
        }
    </style>
</head>
<body>
<div id="root">
    <div class="square square_1 square_white">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top"></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_2 square_ash">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_3">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_4">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_5">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_6">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_7">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_8">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_9 square_white">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_10 square_ash">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_11">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_12">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_13">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_14">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_15">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_16">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_17">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_18">
        <div class="item item_front" style="background-color: #a7b8f4;"></div>
        <div class="item item_queen" style="background-color: #b7cafb;"></div>
        <div class="item item_top" style="background-color: #c2d4ff;" ></div>
        <div class="item item_bottom" style="background-color: #c2d4ff;"></div>
        <div class="item item_left" style="background-color: #a7b8f4;"></div>
        <div class="item item_right" style="background-color: #b7cafb;"></div>
    </div>
    <div class="square square_19">
        <div class="item item_front" style="background-color:#bababa;"></div>
        <div class="item item_queen" style="background-color:#bfc2c3;"></div>
        <div class="item item_top" style="background-color:#d2cece;"></div>
        <div class="item item_bottom" style="background-color:#bababa;"></div>
        <div class="item item_left" style="background-color:#bfc2c3;"></div>
        <div class="item item_right" style="background-color:#a497ca;"></div>
    </div>
    <div class="square square_20">
        <div class="item item_front" style="background-color: #c6bbfd;"></div>
        <div class="item item_queen" style="background-color: #eee2ff;"></div>
        <div class="item item_top" style="background-color: #eee2ff;" ></div>
        <div class="item item_bottom" style="background-color: #c6bbfd;"></div>
        <div class="item item_left" style="background-color: #c6bbfd;"></div>
        <div class="item item_right" style="background-color: #c6bbfd;"></div>
    </div>
    <div class="square square_21 square_ash">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_22">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_23">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_24">
        <div class="item item_front" style="background-color: #e9edf0;"></div>
        <div class="item item_queen" style="background-color: #eff7ff;"></div>
        <div class="item item_top" style="background-color: #e9edf0;" ></div>
        <div class="item item_bottom" style="background-color: #e9edf0;"></div>
        <div class="item item_left" style="background-color: #e9edf0;"></div>
        <div class="item item_right" style="background-color: #eff7ff;"></div>
    </div>
    <div class="square square_25">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_26">
        <div class="item item_front"></div>
        <div class="item item_queen"></div>
        <div class="item item_top" ></div>
        <div class="item item_bottom"></div>
        <div class="item item_left"></div>
        <div class="item item_right"></div>
    </div>
    <div class="square square_27">
        <div class="item item_front" style="background-color: #a7b8f4;"></div>
        <div class="item item_queen" style="background-color: #b7cafb;"></div>
        <div class="item item_top" style="background-color: #c2d4ff;" ></div>
        <div class="item item_bottom" style="background-color: #c2d4ff;"></div>
        <div class="item item_left" style="background-color: #a7b8f4;"></div>
        <div class="item item_right" style="background-color: #b7cafb;"></div>
    </div>
</div>
</body>
</html>
